<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>正在测试...</title>
    <script type="application/javascript" th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
    <script type="application/javascript" th:src="@{/webjars/bootstrap/3.1.1/js/bootstrap.js}"></script>
    <!--显示字母图片然后然后监听用户键盘所按的数字
        1.记录被试按下键的时间以及所按键的值-->
        <script>
            var startDate = new Date();
            var endTime = new Date();
            var timeArray = new Array();
            var answerArray = new Array();
            var id = [[${userId}]];
            var changeImageTime = [[${changeImageTime}]];
            var userId;
            $(document).keydown(function(event){
                //alert(event.keyCode);
                var word = String.fromCharCode(event.keyCode);
                //alert(word);
                var key = event.keyCode - 48;
                //alert(key);
                if (key >=0 && key <=9) {
                    //alert(key);
                    endTime = new Date();
                    var time = endTime-startDate;
                    timeArray.push(time);
                    next(key,word);
                } else if (key >=48 && key <= 57){
                } else {
                    endTime = new Date();
                    var time = endTime-startDate;
                    timeArray.push(time);
                    next(-16,word);
                }
            });
            function next(key,word) {
                var name;
                var value;
                //获取当前显示的图片组合名称
                $(".picture").each(function (i,element) {
                    if ($(element).css("display") == 'block') {
                        userId = element.id;
                    }}
                );
                var c = '#' + userId + '';
                name = $(c).attr("name");
                value = $(c).attr("value");
                if (value!=-16 && value != key) {
                    //alert("你的回答错误！");
                    //new ActiveXObject('Wscript.Shell').SendKeys('{回车}');
                    $("#disappare").show().delay(1000).fadeOut();
                }
                //设置一个过渡
                var number = parseInt(name,10);
                var after = number+1;
                //更改图片显示的状态
                $("div[name="+name+"]").css("display","none");
                var timeS = new Date();
                //$("#restTip").css("display","block");
                while(true) {
                    var timeE = new Date();
                    var partition = timeE - timeS;
                    // alert(partition);
                    if (partition > changeImageTime) {
                        break;
                    }
                }
                //$("#restTip").css("display","none");
                $("div[name="+after+"]").css("display","block");
                //alert(word);
                var answer = userId +","+key +"," + word;
                answerArray.push(answer);
                startDate = new Date();
                if (after == 21) {
                    //保存被试测试的数据
                    $.ajax({
                            type: 'post',
                            url: '/ED_threshold_training/userResponse/saveTestTimeAndResult',
                            data: {timeList: timeArray,answerList: answerArray,type:2,userId:id},
                            traditional: true,
                            success : function(result) {
                                if (result.state == 200) {
                                    location = "/ED_threshold_training/test/login/"+id;
                                    /*var li = '<a href="/ED_threshold_training/userTestResult/get/'+result.results.timePartitionUuid+'"><button type="button" class="button"><span>查看详情</span></button></a>';
                                    $("#testResultTip").html("本次测试的正确率为："+ result.results.rightRate+"%；平均反应时为："+ result.results.avgTime+"ms"+"最近平均值点击:"+li);*/
                                }
                            }
                        }
                    );
                    //$("#nextBtn").css("display","block");
                }
            }
            function onceAgain() {
                location = "/ED_threshold_training/test/login/"+id;
            }
        </script>
    <stytle>
        .prompt{
        display: none;
        padding:20px;
        position: fixed;
        top: 40%; left:40%;
        border-radius:5px;
        background: rgba(0,0,0,0.4);
        z-index: 5000;
        color:#FFF;
        }
    </stytle>
</head>

<body style="background: black">
<div id="disappare" class="prompt" style="display:none;background: white; width:400px; height: 70px;text-align: center;position: fixed;margin-top: 235px;margin-left: 450px; text-align: center;">
    <p  style=" color: red;">回答错误！</p>
</div>
<div style="text-align: center;margin-top: 235px">
<div th:each="s : ${userTestContent}">
    <div th:id="${s.imageUnitName}" class="picture" th:name="${s.number}" th:value="${s.numberResult}" th:if="${s.number == 1}">
        <img th:src="@{${s.imageUnitPathOne}}" name="image" width="45px" height="63.5px" border="none"
             style="padding:0;margin:0"/><img th:src="@{${s.imageUnitPathTwo}}" name="image" width="45px"
                                              height="63.5px" border="none" style="padding:0;margin:0"/>
    </div>
    <div th:id="${s.imageUnitName}" class="picture" th:name="${s.number}" th:value="${s.numberResult}" style="display: none"
         th:if="${s.number != 1}">
        <img th:src="@{${s.imageUnitPathOne}}" name="image" width="45px" height="63.5px" border="none"
             style="padding:0;margin:0"/><img th:src="@{${s.imageUnitPathTwo}}" name="image" width="45px"
                                              height="63.5px" border="none" style="padding:0;margin:0"/>
    </div>
</div>
    <div id="nextBtn" style="display: none;font-size: 24px;">
         <input type="button" th:value="再来一次" style="font-size: 24px;" th:width="200px" th:height="100px" onclick="onceAgain()">
        <div id="testResultTip" style="background: white;width: 850px;height: 35px;margin:20px auto">
        </div>
    </div>
</div>
<div id="restTip" style="display: none;text-align: center;margin-top: 235px">
    <img th:src="@{/image/rest.jpg}" width="45px" height="63.5px">
</div>
</body>
</html>